// 左侧菜单
<template>
  <div class="home-aside">
    <!-- 循环 icon -->
    <i
      class="iconfont"
      :key="item.icon"
      v-for="item in iconfontList"
      :class="`${item.icon} ${item.icon === activeIcon ? 'active' : ''}`"
      @click="menuClick(item)"
    />

    <!-- el-popover 控制台会报错，使用自定义右键菜单实现 -->
    <!-- <el-popover
      trigger="hover"
      :show-arrow="false"
      placement="right-start"
      ref="settingPopoverRef"
    >
      <template #reference>
        <i class="iconfont icon-shezhi"></i>
      </template>
      <div class="setting-box">
        <span
          v-for="item in settingList"
          :key="item.command"
          @click="settingHandle(item.command)"
        >
          {{ item.title }}
        </span>
      </div>
    </el-popover> -->
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import router from "../../../router";
import { ElPopover } from "element-plus";
import { iconfontList, settingList } from "../config/index";

// 激活样式
const activeIcon = ref("icon-wenjianshu1");

// settingPopoverRef
const settingPopoverRef = ref(<InstanceType<typeof ElPopover> | null>null);

/**
 * 左侧菜单点击事件
 */
function menuClick(item: { icon: string; path: string }) {
  activeIcon.value = item.icon;
  router.push(item.path);
}

/**
 * 设置面板点击事件
 */
function settingHandle(command: string) {
  settingPopoverRef.value?.hide();
  switch (command) {
    case "config":
      break;
    case "shortcut":
      break;
    case "code":
      break;
    case "theme":
      break;
  }
}

/**
 * 注：刷新页面，左侧菜单自动激活
 */
onBeforeMount(() => {
  const currentPath = router.currentRoute.value.path;
  // 从 iconfontList 找 iconfont
  const iconfont = iconfontList.find((item) => item.path === currentPath);
  iconfont && (activeIcon.value = iconfont.icon);
});
</script>

<style lang="css" scoped>
.home-aside {
  width: 48px;
  height: 100%;
  background-color: var(--t-main-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.home-aside i {
  color: var(--t-main-font-color);
  transition: all 0.3s;
  cursor: pointer;
  font-size: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
}

.home-aside i:hover {
  color: var(--t-main-aside-color);
  border-radius: 4px;
  background-color: var(--t-main-aside-hover-background-color);
}
.home-aside .icon-shezhi {
  margin-top: auto;
}

.active {
  color: var(--t-main-aside-active-color) !important;
  border-radius: 4px;
  background-color: var(--t-main-aside-hover-background-color);
}

.setting-box {
  font-size: 14px;
}
.setting-box span {
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
}
.setting-box span:hover {
  background-color: rgba(41, 109, 255, 0.1);
}
</style>
